<template>
  <div>
    <div class="mb8">
      <el-button type="primary" size="mini" @click="handleAddWarehouse">
        <i class="el-icon-plus"></i> 添加仓库权限
      </el-button>
    </div>
    
    <el-table :data="displayWarehouseList" size="mini" border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="仓库名称" prop="warehouseName" min-width="150" />
      <el-table-column label="满箱入库" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.allowFullInbound === '1' ? 'success' : 'danger'" size="mini">
            {{ scope.row.allowFullInbound === '1' ? '允许' : '禁止' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="满箱出库" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.allowFullOutbound === '1' ? 'success' : 'danger'" size="mini">
            {{ scope.row.allowFullOutbound === '1' ? '允许' : '禁止' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="空箱入库" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.allowEmptyInbound === '1' ? 'success' : 'danger'" size="mini">
            {{ scope.row.allowEmptyInbound === '1' ? '允许' : '禁止' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="空箱出库" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.allowEmptyOutbound === '1' ? 'success' : 'danger'" size="mini">
            {{ scope.row.allowEmptyOutbound === '1' ? '允许' : '禁止' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="装箱权限" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.allowPacking === '1' ? 'success' : 'danger'" size="mini">
            {{ scope.row.allowPacking === '1' ? '允许' : '禁止' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="拆箱权限" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.allowUnpacking === '1' ? 'success' : 'danger'" size="mini">
            {{ scope.row.allowUnpacking === '1' ? '允许' : '禁止' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="装箱时机" width="100" align="center">
        <template slot-scope="scope">
          {{ getTimingText(scope.row.packingTiming) }}
        </template>
      </el-table-column>
      <el-table-column label="拆箱时机" width="100" align="center">
        <template slot-scope="scope">
          {{ getTimingText(scope.row.unpackingTiming) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEditWarehouse(scope.row, scope.$index)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            style="color: #f56c6c;"
            @click="handleDeleteWarehouse(scope.row, scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 仓库权限操作日志（编辑模式下显示） -->
    <div v-if="isEdit && warehouseOperations.length > 0" style="margin-top: 20px;">
      <el-divider content-position="left">操作记录</el-divider>
      <el-timeline size="small">
        <el-timeline-item
          v-for="(op, index) in warehouseOperations"
          :key="index"
          :type="getOperationType(op.operationType)"
        >
          <div>
            <span class="operation-type">{{ getOperationText(op.operationType) }}</span>
            <span class="warehouse-name">{{ op.warehouseName || getWarehouseName(op.warehouseId) }}</span>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    
    <!-- 仓库权限编辑对话框 -->
    <el-dialog
      :title="warehouseDialogTitle"
      :visible.sync="warehouseDialogVisible"
      width="700px"
      :modal="false"
      :before-close="handleWarehouseDialogClose"
    >
      <el-form ref="warehouseForm" :model="warehouseForm" :rules="warehouseRules" label-width="120px">
        <el-form-item label="选择仓库" prop="warehouseId" v-if="!isEditingWarehouse">
          <el-select 
            v-model="warehouseForm.warehouseId" 
            placeholder="请选择仓库"
            style="width: 100%;"
            @change="handleWarehouseChange"
          >
            <el-option
              v-for="warehouse in warehouseOptions"
              :key="warehouse.warehouseId"
              :label="warehouse.warehouseName"
              :value="warehouse.warehouseId"
              :disabled="isWarehouseExists(warehouse.warehouseId)"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="仓库名称" v-if="isEditingWarehouse">
          <el-input v-model="warehouseForm.warehouseName" disabled />
        </el-form-item>
        
        <!-- 入库出库权限 -->
        <el-divider content-position="left">入库出库权限</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="满箱入库" prop="allowFullInbound">
              <el-radio-group v-model="warehouseForm.allowFullInbound">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="满箱出库" prop="allowFullOutbound">
              <el-radio-group v-model="warehouseForm.allowFullOutbound">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="空箱入库" prop="allowEmptyInbound">
              <el-radio-group v-model="warehouseForm.allowEmptyInbound">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="空箱出库" prop="allowEmptyOutbound">
              <el-radio-group v-model="warehouseForm.allowEmptyOutbound">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 装箱拆箱权限 -->
        <el-divider content-position="left">装箱拆箱权限</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="装箱权限" prop="allowPacking">
              <el-radio-group v-model="warehouseForm.allowPacking">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拆箱权限" prop="allowUnpacking">
              <el-radio-group v-model="warehouseForm.allowUnpacking">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="装箱时机" prop="packingTiming">
              <el-select 
                v-model="warehouseForm.packingTiming" 
                placeholder="请选择装箱时机"
                style="width: 100%;"
                :disabled="warehouseForm.allowPacking === '0'"
                clearable
              >
                <el-option label="入库后自动装箱" value="1" />
                <el-option label="手动装箱" value="2" />
                <el-option label="出库前自动装箱" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拆箱时机" prop="unpackingTiming">
              <el-select 
                v-model="warehouseForm.unpackingTiming" 
                placeholder="请选择拆箱时机"
                style="width: 100%;"
                :disabled="warehouseForm.allowUnpacking === '0'"
                clearable
              >
                <el-option label="入库后自动拆箱" value="1" />
                <el-option label="手动拆箱" value="2" />
                <el-option label="出库前自动拆箱" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 其他权限 -->
        <el-divider content-position="left">其他权限</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="折叠权限" prop="allowFolding">
              <el-radio-group v-model="warehouseForm.allowFolding">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="清洗权限" prop="allowCleaning">
              <el-radio-group v-model="warehouseForm.allowCleaning">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修权限" prop="allowRepair">
              <el-radio-group v-model="warehouseForm.allowRepair">
                <el-radio label="1">允许</el-radio>
                <el-radio label="0">禁止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleWarehouseDialogClose">取 消</el-button>
        <el-button type="primary" @click="submitWarehouseForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "WarehousePermissionForm",
  props: {
    warehouseList: {
      type: Array,
      default: () => []
    },
    warehouseOperations: {
      type: Array,
      default: () => []
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    warehouseOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      warehouseDialogVisible: false,
      warehouseDialogTitle: '',
      warehouseForm: {},
      currentWarehouseIndex: -1,
      isEditingWarehouse: false,
      warehouseRules: {
        warehouseId: [
          { required: true, message: "请选择仓库", trigger: "change" }
        ],
        allowFullInbound: [
          { required: true, message: "请设置满箱入库权限", trigger: "change" }
        ],
        allowFullOutbound: [
          { required: true, message: "请设置满箱出库权限", trigger: "change" }
        ],
        allowEmptyInbound: [
          { required: true, message: "请设置空箱入库权限", trigger: "change" }
        ],
        allowEmptyOutbound: [
          { required: true, message: "请设置空箱出库权限", trigger: "change" }
        ],
        allowPacking: [
          { required: true, message: "请设置装箱权限", trigger: "change" }
        ],
        allowUnpacking: [
          { required: true, message: "请设置拆箱权限", trigger: "change" }
        ]
      }
    };
  },
  computed: {
    displayWarehouseList() {
      return this.warehouseList || [];
    }
  },
  methods: {
    // 添加仓库权限
    handleAddWarehouse() {
      this.resetWarehouseForm();
      this.warehouseDialogTitle = '添加仓库权限';
      this.isEditingWarehouse = false;
      this.currentWarehouseIndex = -1;
      this.warehouseDialogVisible = true;
    },
    
    // 编辑仓库权限
    handleEditWarehouse(warehouse, index) {
      this.warehouseForm = { ...warehouse };
      this.warehouseDialogTitle = '修改仓库权限';
      this.isEditingWarehouse = true;
      this.currentWarehouseIndex = index;
      this.warehouseDialogVisible = true;
    },
    
    // 删除仓库权限
    handleDeleteWarehouse(warehouse, index) {
      this.$confirm('确认删除该仓库权限配置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.isEdit && warehouse.projectWarehouseId) {
          // 编辑模式下，添加删除操作
          this.addWarehouseOperation('delete', {
            projectWarehouseId: warehouse.projectWarehouseId
          });
        }
        
        // 从列表中移除
        this.warehouseList.splice(index, 1);
        this.$message.success('删除成功');
        this.$emit('delete-warehouse', warehouse);
      });
    },
    
    // 提交仓库权限表单
    submitWarehouseForm() {
      this.$refs.warehouseForm.validate(valid => {
        if (valid) {
          if (this.isEditingWarehouse) {
            // 修改仓库权限
            this.$set(this.warehouseList, this.currentWarehouseIndex, { ...this.warehouseForm });
            
            if (this.isEdit && this.warehouseForm.projectWarehouseId) {
              // 编辑模式下，添加修改操作
              this.addWarehouseOperation('update', this.warehouseForm);
            }
            
            this.$message.success('修改成功');
            this.$emit('edit-warehouse', this.warehouseForm);
          } else {
            // 新增仓库权限
            const newWarehouse = { ...this.warehouseForm };
            // 设置仓库名称
            const warehouse = this.warehouseOptions.find(w => w.warehouseId === newWarehouse.warehouseId);
            if (warehouse) {
              newWarehouse.warehouseName = warehouse.warehouseName;
            }
            
            if (!this.warehouseList) {
              this.$emit('update:warehouseList', [newWarehouse]);
            } else {
              this.warehouseList.push(newWarehouse);
            }
            
            if (this.isEdit) {
              // 编辑模式下，添加新增操作
              this.addWarehouseOperation('create', newWarehouse);
            }
            
            this.$message.success('添加成功');
            this.$emit('add-warehouse', newWarehouse);
          }
          
          this.warehouseDialogVisible = false;
        }
      });
    },
    
    // 关闭仓库权限对话框
    handleWarehouseDialogClose() {
      this.warehouseDialogVisible = false;
      this.resetWarehouseForm();
    },
    
    // 重置仓库权限表单
    resetWarehouseForm() {
      this.warehouseForm = {
        warehouseId: null,
        warehouseName: '',
        allowFullInbound: '1',
        allowFullOutbound: '1',
        allowEmptyInbound: '1',
        allowEmptyOutbound: '1',
        allowPacking: '1',
        allowUnpacking: '1',
        packingTiming: '2',
        unpackingTiming: '2',
        allowFolding: '1',
        allowCleaning: '1',
        allowRepair: '1'
      };
      if (this.$refs.warehouseForm) {
        this.$refs.warehouseForm.resetFields();
      }
    },
    
    // 仓库选择变更
    handleWarehouseChange(warehouseId) {
      const warehouse = this.warehouseOptions.find(w => w.warehouseId === warehouseId);
      if (warehouse) {
        this.warehouseForm.warehouseName = warehouse.warehouseName;
      }
    },
    
    // 检查仓库是否已存在
    isWarehouseExists(warehouseId) {
      return this.warehouseList && this.warehouseList.some(w => w.warehouseId === warehouseId);
    },
    
    // 获取仓库名称
    getWarehouseName(warehouseId) {
      const warehouse = this.warehouseOptions.find(w => w.warehouseId === warehouseId);
      return warehouse ? warehouse.warehouseName : '';
    },
    
    // 添加仓库权限操作记录
    addWarehouseOperation(operationType, data) {
      if (!this.warehouseOperations) {
        this.$set(this, 'warehouseOperations', []);
      }
      
      const operation = {
        operationType,
        ...data
      };
      
      this.warehouseOperations.push(operation);
    },
    
    // 获取操作类型样式
    getOperationType(type) {
      const typeMap = {
        'create': 'success',
        'update': 'primary',
        'delete': 'danger'
      };
      return typeMap[type] || 'info';
    },
    
    // 获取操作文本
    getOperationText(type) {
      const textMap = {
        'create': '新增',
        'update': '修改',
        'delete': '删除'
      };
      return textMap[type] || '未知';
    },
    
    // 获取时机文本
    getTimingText(timing) {
      const timingMap = {
        '1': '入库后自动',
        '2': '手动',
        '3': '出库前自动'
      };
      return timingMap[timing] || '-';
    }
  }
};
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}

.operation-type {
  font-weight: bold;
  margin-right: 8px;
}

.warehouse-name {
  color: #409EFF;
}
</style> 